import 'package:boss/textStyle/text_style.dart';

import 'package:boss/ui/page/marketing/marketingAnalysis/widget/pie_chart.dart';
import 'package:boss/ui/widget/button/radius_button.dart';
import 'package:boss/ui/widget/calendar_bar.dart';
import 'package:boss/ui/widget/center_title_app_bar.dart';
import 'package:boss/ui/widget/shadow_radius_card.dart';
import 'package:hi_common/hi_common.dart';
import 'package:flutter/material.dart';
import 'package:router/annotation.dart';

@RouterConfig(MarketingAnalysisPage.pageName)
class MarketingAnalysisPage extends StatefulWidget {
  static const String pageName = '/MarketingAnalysisPage';

  @override
  _MarketingAnalysisPageState createState() => _MarketingAnalysisPageState();
}

class _MarketingAnalysisPageState extends BaseState<MarketingAnalysisPage> {
  _MarketingAnalysisPageState() : super(MarketingAnalysisPage.pageName);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CenterTitleAppBar(
          title: '礼券效果',
        ),
        body: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(
                top: 30.w,
                bottom: 15.w,
                left: 30.w,
                right: 30.w,
              ),
              child: Row(
                children: <Widget>[
                  Expanded(child: CalendarBar()),
                  Container(
                    margin: EdgeInsets.only(left: 20.w),
                    child: RadiusButton(
                      width: 160.w,
                      height: 60.w,
                      title: '查询',
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: SingleChildScrollView(
                padding: EdgeInsets.symmetric(horizontal: 30.w),
                child: Column(
                  children: <Widget>[
                    _Row(
                      left: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          PieChart(0.2, 80),
                          Container(
                            margin: EdgeInsets.only(top: 20.w),
                            child: Text(
                              '用券率',
                              style: TextStyleConstant().normal_2_24,
                            ),
                          )
                        ],
                      ),
                      centerTitle: '发券数',
                      centerUnit: '张',
                      centerValue: 0,
                      rightTitle: '发券数',
                      rightUnit: '张',
                      rightValue: 0,
                    ),
                    _Row(
                      left: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          PieChart(0.2, 80),
                          Container(
                            margin: EdgeInsets.only(top: 20.w),
                            child: Text(
                              '用券率',
                              style: TextStyleConstant().normal_2_24,
                            ),
                          )
                        ],
                      ),
                      centerTitle: '拉新顾客',
                      centerUnit: '人',
                      centerValue: 0,
                      rightTitle: '消费顾客',
                      rightUnit: '人',
                      rightValue: 0,
                    ),
                    _Row(
                      left: _Msg('券撬动力', '元', 0, color: Theme.of(context).primaryColor),
                      centerTitle: '拉新顾客',
                      centerUnit: '人',
                      centerValue: 0,
                      rightTitle: '消费顾客',
                      rightUnit: '人',
                      rightValue: 0,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ));
  }
}

class _Row extends StatelessWidget {
  final Widget left;
  final String centerTitle;
  final int centerValue;
  final String centerUnit;
  final String rightTitle;
  final int rightValue;
  final String rightUnit;

  const _Row({
    this.left,
    this.centerTitle,
    this.centerValue,
    this.centerUnit,
    this.rightTitle,
    this.rightValue,
    this.rightUnit,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ShadowRadiusCard(
      margin: EdgeInsets.symmetric(vertical: 15.w),
      height: 250.w,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          left,
          _Msg(centerTitle, centerUnit, centerValue),
          _Msg(rightTitle, rightUnit, rightValue),
        ],
      ),
    );
  }
}

class _Msg extends StatelessWidget {
  final String title;
  final String unit;
  final int value;
  final Color color;

  const _Msg(this.title, this.unit, this.value, {this.color, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var valueStyle = TextStyleConstant().normal_1_44.copyWith(fontFamily: 'DINAlternate-Bold');
    var titleStyle = TextStyleConstant().normal_2_26;
    var unitStyle = TextStyleConstant().normal_1_22;
    if (color != null) {
      valueStyle = valueStyle.copyWith(color: color);
      titleStyle = titleStyle.copyWith(color: color);
      unitStyle = unitStyle.copyWith(color: color);
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '$value',
          style: valueStyle,
        ),
        Container(
          margin: EdgeInsets.only(
            top: 20.w,
          ),
          child: RichText(
            text: TextSpan(
              text: title,
              style: titleStyle,
              children: [
                TextSpan(text: '/$unit', style: unitStyle),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
